import React, { Component } from 'react'
import './index.css'
import echarts from 'echarts/lib/echarts';
// 引入柱状图
import  'echarts/lib/chart/bar';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
class index extends Component {
    componentDidMount() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        var myChart2 = echarts.init(document.getElementById('main2'));
        var myChart3 = echarts.init(document.getElementById('main3'));
        var myChart4 = echarts.init(document.getElementById('main4'));
        // 绘制图表
        myChart.setOption({
            title: { text: '商品柱状图' },
            tooltip: {},
            xAxis: {
                data: ["巧克力", "坚果", "螺蛳粉", "三只松鼠", "猪肉脯", "准子哥"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [15, 20, 36, 30, 10, 20]
            }]
        });
        // 
        myChart2.setOption({
            title: { text: '商品柱状图' },
            tooltip: {},
            xAxis: {
                data: ["乐事薯片", "碧根果", "松子", "腰果", "费列罗巧克力", "麻辣牛肉干"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [25, 10, 66, 20, 10, 10]
            }]
        });
        // 
        myChart3.setOption({
            title: { text: '商品柱状图' },
            tooltip: {},
            xAxis: {
                data: ["早餐面包", "雀巢咖啡", "方便面", "曲奇饼", "丽芝士饼干", "精品火腿"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [15, 25, 36, 20, 30, 15]
            }]
        });
        // 
        myChart4.setOption({
            title: { text: '商品柱状图' },
            tooltip: {},
            xAxis: {
                data: ["粽子", "咸蛋", "炒面", "春节大礼包", "朗姆酒", "武昌鱼"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [35, 10, 16, 40, 30, 25]
            }]
        });
    }
    render() {
        return (
            <div>
                <div id="main" style={{ width: 400, height: 400 }}></div>
                <div id="main2" style={{ width: 400, height: 400 }}></div>
                <div id="main3" style={{ width: 400, height: 400 }}></div>
                <div id="main4" style={{ width: 400, height: 400 }}></div>
            </div>
            
        );
    }
}

export default index;